@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (ngm, color);

@function get-unthemable-tokens() {
  @return (
  );
}

@function get-color-tokens() {
  @return (
    surface-container-low: null,
    surface-container: null,
    surface-container-high: null,
    surface: null,
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  .ngm-chart-property__card {
    background-color: var(#{token-utils.get-token-variable(surface)});
  }
}

:host {
  --mat-expansion-header-text-size: 12px;
  @apply flex-1 flex;

  .ngm-property-select {
    flex: 1;
  }
}

.ngm-formly__remove {
  visibility: hidden;
}

.ngm-property-select:hover {
  .ngm-formly__remove {
    visibility: visible;
  }
}

.ngm-chart-property__card {
  @apply p-2 flex flex-col rounded-lg;
}
.ngm-chart-property__card-title {
  @apply text-sm font-semibold;
}

::ng-deep {
  .ngm-chart-property__palette-trigger.mat-mdc-menu-trigger {
    @apply my-2;
    .mdc-button__label {
      @apply w-full;
    }
  }
}

.mat-button-toggle-group {
  @apply max-w-full flex-wrap;
}